<template>
  <div class="strut-div">
    <div class="mt-card">
      <div class="mt-card-top clear-float">
        <div class="ct-item" v-for="(data, index) in topTotalData" :key="index">
          <p class="c-title">{{data.name}}</p>
          <div class="c-num lcd-font">{{Math.round(data.value)}}</div>
        </div>
      </div>

     <div class="mt-card-middle">
        <div class="L_transform">
          <div class="trans_bg">
            <div class="bg_shade"></div>
            <div class="circles topcircle active">
              <div class="trio">
                <p>科研人员</p><i></i>
              </div>
              <!-- <div class="pos">
                <span>学校录取率学校资源</span>
              </div> -->
            </div>
            <div class="circles leftcircle active">
              <div class="trio">
                <p>科研成果</p><i></i>
              </div>
              <!-- <div class="pos">
                <span>考试成绩 提供课程</span>
                <span>师资力量 申请条件</span>
              </div> -->
            </div>
            <div class="circles rightcircle active">
              <div class="trio">
                <p>科研专利</p><i></i>
              </div>
              <!-- <div class="pos">
                <span>年度费用 住宿方式</span>
                <span>社区规模 建校历史</span>
              </div> -->
            </div>
            <div class="heart_box">
              <div class="heart"></div>
              <div class="shan" style="transform: rotate(310deg);"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="card-item" style="height:336px; width: 100%; margin-top:20px;">
        <p class="card-title">新品种信息</p>
        <div class="card-div">
          <div class="xpz-left">
            <common-pieNew-chart ref="levelPie" :config='levelConfig'></common-pieNew-chart>
          </div>
          <div class="xpz-right">
            <common-line-chart ref="unitLine" :config="unitConfig"></common-line-chart>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    scienceResearchPersonTotal,
    partyMemberTotal,
    photoDetails,
    scienceResearchProjectTotal,
    patentTotal,
    newBreedTotal,
    levelSum,
    unitSum,
    colorList
  } from '@/network/tg-fake-data.js';

  import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
  import topBarChart from '@/views/sx-digital-agriculture/sx-left/top-bar-chart.vue';
  import CommonLineChart from '@/components/common/common-line-chart.vue';

  export default {
    name: 'sx-tech-middle',
    components:{
      CommonPieNewChart,
      topBarChart,
      CommonLineChart
    },
    data() {
      return {
        topTotalData: [{
            name: '科研人员总数',
            value: scienceResearchPersonTotal
          },
          {
            name: '科研项目总数',
            value: scienceResearchProjectTotal
          },
          {
            name: '专利总数',
            value: patentTotal
          },
          {
            name: '新品种选育总数',
            value: newBreedTotal
          }
        ],
        photoList: [],
        levelConfig:{
          option: {
            title: {
              show:true,
              text:'新品种级别统计',
              textStyle:{
                color:'#FFF',
                fontSize:15,
                fontWeight:400
              },
              padding:20,
            },
            id: 'levelPie',
            color: colorList,
            legend: {
              show: true,
              x: "60%",
              y: "5%",
              orient: 'vertical',
              textStyle: {
                color: colorList,
                fontSize: 14,
              },
              padding: 20,
              itemGap: 14,
              data: []
            },

            series: [{
              name: '',
              type: 'pie',
              radius: [30, 65],
              center: ['50%', '55%'],
              label: {
                formatter: '{a} {b} :{c}({d}%)'
              },
              labelLine: {
                length: 10,
                length2: 10,
              },
              data: []
            }]
          }
        },
        unitConfig:{
          option: {
              id: 'unitLine',
              boundaryGap:true,
              x: unitSum.category,
              limit:true,
              y: [{
                  title: "新品种数量（个）",
                  data: unitSum.series,
                  color: '#F6CE11',
                  axis: {
                      min:0,
                      max:100
                  },
                  label:{
                      show:true,
                      color: "#F6CE11",
                      fontSize: 14
                  }
              }]
          }
        }
      }
    },
    mounted() {

      var photoDetailsList = JSON.parse(JSON.stringify(photoDetails))
      while (photoDetailsList.length > 0) {
        let li = photoDetailsList.splice(0, 3);
        this.photoList.push(li);
      }
      this.initLevel()
      this.$refs.unitLine.initChart();
    },
    methods: {
      initLevel(){
        this.levelConfig.option.legend.data = levelSum.category;
        this.levelConfig.option.series[0].data = levelSum.series.map((item, index) => {
          return {
            value: item,
            name: levelSum.category[index]
          }
        });

        this.$refs.levelPie.initChart();
      }
    },
  }
</script>
<style lang="scss" scoped>
  .mt-card {
    width: 100%;
    height: 635px;
    position: relative;
    // background: url(../../../assets/imgs/tg/middle-card.png) no-repeat;

    .mt-card-top {
      padding: 30px 270px 0 270px;

      >.ct-item {
        width: 146px;
        height: 90px;
        margin: 10px 16px;
        float: left;

        >.c-title {
          height: 43px;
          line-height: 43px;
          font-size: 16px;
        }

        >.c-num {
          width: 145px;
          height: 47px;
          text-align: center;
          line-height: 55px;
          color: #ffcb03;
          font-size: 36px;
          background: url(../../../assets/imgs/tg/number-bg.png);
        }
      }
    }
  }

  .photo-container {
    display: flex;

    .photo-bg {
      flex: 1;
      height: 200px;

      >div {
        background: url(../../../assets/imgs/tg/people-bg.png) no-repeat;
        height: 194px;
        width: 261px;
        float: right;
        position: relative;

        >img {
          width: 100px;
          height: 130px;
          background-color: #FFFFFF;
          position: absolute;
          top: 20px;
          left: 5px;
        }

        >div {
          position: absolute;
          top: 44px;
          left: 112px;
          font-size: 13px;
          line-height: 3em;
        }
      }
    }
  }

.xpz-left {
    height: 100%;
    width: 260px;
    float: left;
  }
  .xpz-right {
    height: 100%;
    width: 992px;
    float: left;
  }


  .L_transform {
    width: 375px;
    height: 310px;
    margin: 92.5px auto;
    transform: scale(1.3);
  }

  .L_transform .trans_bg {
    position: relative;
    float: left;
    margin-left: 26px;
    width: 300px;
    height: 300px
  }

  .L_transform .bg_shade {
    background: url(../../../assets/imgs/tg/quan_bg.png) no-repeat;
    width: 419px;
    height: 390px;
    position: absolute;
    left: -56px;
    top: -39px
  }

  .L_transform .trans_bg .circles {
    position: absolute
  }

  .trans_bg .topcircle {
    left: 119px;
    top: -15px
  }

  .trans_bg .topcircle .pos {
    position: absolute;
    left: 65px;
    top: 10px
  }

  .trans_bg .active .pos span {
    color: #00c8d4
  }

  .trans_bg .leftcircle .pos {
    position: absolute;
    left: -28px;
    top: 62px
  }

  .trans_bg .rightcircle .pos {
    position: absolute;
    left: -34px;
    top: 68px
  }

  .trans_bg .topcircle .pos span {
    width: 73px;
    display: inline-block
  }

  .trans_bg .leftcircle {
    left: 8px;
    top: 194px
  }

  .trans_bg .rightcircle {
    left: 256px;
    top: 153px
  }

  .trans_bg .pos {
    position: relative;
    width: 133px
  }

  .trans_bg .trio {
    color: #fff;
    font-size: 16px;
    text-align: center;
    margin: 0 auto;
    width: 60px;
    height: 60px;
    background: #00c8d4;
    position: absolute;
    border-radius: 50%
  }

  .trans_bg .trio p {
    width: 38px;
    margin-left: 11px;
    margin-top: 8px
  }

  .trans_bg .pos span {
    color: #999fb1;
    font-size: 14px
  }

  .trans_bg .circles.active .trio i {
    width: 18px;
    height: 18px;
    // background: url(../../../assets/imgs/tg/quan_active.png) no-repeat;
    display: inline-block;
    position: absolute;
    top: 43px;
    left: 35px
  }

  .trans_bg .heart_box {
    width: 301px;
    display: inline-block;
    height: 300px
  }

  .trans_bg .heart_box .heart {
    position: absolute;
    width: 88px;
    height: 88px;
    background: url(../../../assets/imgs/tg/quan_circle.png) no-repeat;
    left: 105px;
    top: 105px
  }

  .trans_bg .heart_box .shan {
    width: 211px;
    height: 129px;
    background: url(../../../assets/imgs/tg/quan_rotate.png) no-repeat;
    top: 25px;
    left: 42px;
    position: absolute;
    -webkit-transform-origin: 107px 124px;
    transform-origin: 108px 124px;
    transform: rotate(0deg);
    animation: radar 5s linear infinite
  }

  @keyframes radar {
    0% {
      transform: rotate(0deg)
    }

    50% {
      transform: rotate(180deg)
    }

    100% {
      transform: rotate(360deg)
    }
  }
</style>
